/*!
 * Copyright (C) 2010-2015 Kaj Magnus Lindberg
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

/**
 * Styles for the Reply, Like, Wrong More etcetera links below each post.
 */


.dw-as
  margin: -2px 0 30px;
  // Old comment: Use padding-top not margin-top here, or there'll be a tiny space between
  // the post and the .dw-as, which triggers a certain $thread.mouseleave() in
  // debiki.js which, for inline actions, hides the action menu — just before
  // you're able to click any action.
  padding: 0
  position: relative // for position: absolute 'Click this...' tips, inside

.dw-p-as
  .dw-a:before,
  .dw-a:after
    // Dim icons; they are otherwise eye catching blubs of colors.
    opacity: 0.43

.dw-depth-0 > .dw-p-as
  // Always show actions for the article / root post.
  visibility: visible !important;
  margin: $postActionsMarginTop 0 0;   // [7PWTC42Y]  [post_acts_valign]

.DW.DW .dw-depth-0 > .dw-p-as
  > .dw-a,
  > .dropdown
    // More whitespace between root post actions.
    margin: 0 0 0 11px

.dw-depth-0 > .dw-p-as > .dropdown
  // This makes little sense for the root post:
  .dw-a-offtopic,
  .dw-a-pin,
  .dw-a-collapse-tree,
  .dw-a-collapse-post,
  .dw-a-close-tree
    display: none !important

.DW.DW .dw-ar-t > .dw-p-as
  float: right; // leave space for social Like buttons to the left
                // COULD remove — now those buttons are gone.
                // Breaks the metabar's margin-top. [MTBMGTP]
  .dw-a-change
    margin-left: 10px;

.DW.DW .dw-ar-t > .dw-p-as > .dw-a-change,
.DW.DW .dw-ar-t > .dw-p-as > .dw-a-reply
  padding: 7px 17px 7px 13px !important;
  position: relative;
  top: 1px;  // v-align with Close/Reopen text  [v_alg_op_btns]
  color: white;
  background-color: hsl($uiHue, 80%, 54%);
  margin-bottom: 18px;  // instead of metabar's margin-top  [MTBMGTP]

.DW.DW .dw-ar-t > .dw-p-as > .dw-a-reply:not(.s_PA_B-Disabled):hover
  color: white;
  background-color: hsl($uiHue, 95%, 64%);

.DW.DW .dw-ar-t > .dw-p-as > .dw-a-change:hover
  color: black;
  background: hsl(0,0%,86%);

.DW.DW .dw-ar-t > .dw-p-as > .dw-a-change
  background: hsl(207, 0%, 92%);
  color: hsl(0, 0%, 15%);
  font-weight: bold;

.dw-a
  text-decoration: none !important
  color: #3872ab
  font-size: 14px
  float: right

.dw-p-as > .dropdown
  float: right;

// Without this, the rightmost action button might float a bit higher up than the others,
// which get pushed down by contents in the post.
.esPA
  & > .dropdown:first-child,
  & > .dw-a-reply:first-child
    clear: both;


.esDropModal
  .dw-a
    margin: 0 !important;
    padding: 12px;

.esDropModal .dw-a,
.dw-t > .dw-p-as .dw-a
  padding: 8px 9px 14px 9px;
  color: hsl($uiHue, 0%, 55%);
  border: none;

  &.dw-a-reply
    color: hsl(0, 0%, 51%);
    &:before
      opacity: 0.47;
      margin-right: 5px;
    &.s_PA_B-Disabled
      opacity: 0.5;
      cursor: default;
    &.s_PA_B-Active
      opacity: 1;
      color: white;
      background: hsl($uiHue, 40%, 40%);

  &.dw-a-solve,
  &.dw-a-solved
    padding-right: 0.45em;
    margin-right: 0.45em;

  // Make the "Solved" text dark so it's easy to see which post is the answer.
  &.dw-a-solved
    color: hsl($solvedHue, 100%, 28%);
    font-weight: bold;
    font-size: 106%;
    &:not(.dw-a-unsolve):hover
      // Undo on-hover. Dupl code, kind of. Oh well.
      background: none;
      outline: none;
      cursor: default;
      color: hsl($solvedHue, 100%, 28%);

  &.dw-a-solve,
  &.dw-a-solved
    &:before
      opacity: 0.7;

  // Make the Like buttom smaller to the right, so it gets closer to the other-votes-dropdown.
  // But larger to the left, so it's easier to click (since people will click the left part of it,
  // to avoid the dropdown).
  &.dw-a-like
    padding-right: 11px;
    padding-left: 13px;

  &.dw-vote-count
    padding-right: 4px;
    padding-left: 0;
    white-space: nowrap;
    // Add space between e.g. "1 Like" and "2 Wrongs":
    + .dw-vote-count
      margin-right: 5px;

  &.dw-a-votes
    padding-left: 0;
    padding-right: 1px;
    padding-bottom: 6px;
    &:after
      font-size: 24px;
      //border-left: 1px solid hsl(0, 0, 64%); — not needed? looks better without
      margin-left: 0;
      padding: 2px 12px 1px 11px;
      position: relative;
      top: -3px;
    &.dw-my-vote:after
      font-size: 26px;
      top: -4px;
      padding-top: 0;

  &.dw-a-link
    padding: 8px 9px 13px 7px;
    font-size: 14px;

  &.dw-a-link:before,
  &.dw-a-edit:before
    opacity: 0.8;
  &.dw-a-link,
  &.dw-a-edit
    &:hover:before
      opacity: 1;

  &.dw-a-edit.icon-edit:before
    color: hsl(0, 0%, 62%); // or too dark (it's a compact icon)

  &.dw-a-edit.s_UnfinEd
    font-weight: bold;
    font-size: 15px;
    color: hsl(0, 0%, 16%);
    padding-left: 0;
    padding-right: 2px;
    margin-left: 6px;
    margin-right: 8px;
    &.icon-edit:before
      color: hsl(0, 0%, 32%);
      margin-right: 4px;

  &.dw-a-edit.s_PA-EdWik:before
    // Add some space between icon and "Wiki" text.
    margin-right: 6px;

  &.dw-a-more
    margin-right: 0;
    padding-left: 9px;
    padding-right: 13px;

  &:hover:not(.dw-a-votes):not(.s_PA_B-Disabled),
  &.dw-a-votes:hover:after
    // dupl code (6KF0WR4Z)
    color: hsl($uiHue, 100%, 25%);
    background: hsl($uiHue, 100%, 98%);
    outline: 1px solid hsl($uiHue, 100%, 92%);
    text-decoration: none;

  &:hover:before,
  &:hover:after
    opacity: 0.7

  &.dw-my-vote:before,
  &.dw-my-vote:after
    opacity: 0.85;

.esDwnvts .esExplDrp_entry_title
  font-size: $postFontSize;
  margin-bottom: 3px;

.dw-ar-t > .dw-p-as
  .dw-a-admin:before,
  .dw-a-reply:before,
  .dw-a-change:before
    opacity: 1 !important;

.dw-ar-t > .dw-p-as
  .dw-a-admin
    margin: 0 0 0 8px !important;
  .dw-a-other-topics
    margin: 0 4px 0 5px !important;
  .dw-a-admin,
  .dw-a-other-topics
    &.icon-link-ext:before
      top: 1px;
      left: -1px;
      position: relative;


.esDropModal .dw-a,
.DW .dw-ar-t > .dw-p-as .dw-a
  color: hsl(0, 0%, 34%);


html:not(.mouse) .dw-t > .dw-p-as .dw-a
  outline: none; // no is-focused outline


// Prevent float drop when vote highlighted and font larger and button therefore wider,
// by reducing padding.
.DW.DW .dw-p-as .dw-a.dw-my-vote
  padding-left: 9px;
  &.dw-a-votes
    padding-left: 0;  // was already 0 ...
    &:after
      padding-right: 12px; // ... so reduce padding-right instead

// Avoid float drop (the reply button is to the very left)
.s_OpReB,
.DW.DW .dw-p-as .dw-a-reply
  padding: 9px 12px 9px 8px;
  margin-left: 6px;
  background: hsl(207, 0%, 95%);
  color: hsl(0, 0%, 18%);
  &:before
    opacity: 0.6; // or icon too not-opaque

.s_OpReB
  display: inline-block;
  margin: 0 0 40px 0;
  &::before
    margin-right: 6px;  // between the reply icon and the button text
  b
    margin-right: 2px;  // after the "Reply" text and any " (discussion)" clarification

// In threaded discussion topics, make the add-progress-post button less prominent;
// most people aren't supposed to use it. [ADPRGNT]
.s_ThrDsc .s_OpReB-Prg
  background: none;
  color: hsl(0, 0%, 35%);
  margin-left: 20px;
  font-weight: normal;
  padding-left: 0;
  padding-right: 5px;

// Highlight the heart and other vote symbols if the user has voted Like or whatever.
.dw-my-vote:before,
.dw-my-vote:after
  color: hsl($heartAndErrorHue, 100%, 60%);
  font-size: 115%;

.esDwnvts
  @media (min-width: 500px)
    max-width: 380px !important;

  .dw-a-wrong,
  .dw-a-bury,
  .dw-a-unwanted
    &:before
      margin-left: 0;

.esDwnvts .dw-my-vote:before
  font-size: 110%;
  &.icon-bury
    font-size: 120%;  // it's already set to 110% because fairly small

// Show a ▾ icon as open-more-votes-dropdown-button. Same as
// class .icon-down-dir, but :after. Don't use "▾" directly though; it breaks on my mobile.
.dw-a-votes:after
  content: " \e80f"
  font-family: "fontello"

.esDropModal .dw-a,
.DW.DW .dw-p-as-votes > .dw-a,
.DW.DW .dw-p-as-more > .dw-a
  float: none
  display: block
  margin: 8px 10px 14px 12px
  color: hsl(0, 0%, 23%);
  &.icon-trash:before
    opacity: 0.7; // or too opaque, hard to see



// Bury = dig = a spade = a rotated spoon.
.icon-bury:before
  content: '\e82d'; // the spoon (Font Awesome via Fontello)
  -webkit-transform: rotate(220deg);
  -moz-transform: rotate(220deg);
  -ms-transform: rotate(220deg);
  -o-transform: rotate(220deg);
  transform: rotate(220deg);
  // The spoon is small. But spades are not small.
  font-size: 110%;
  margin-right: 0.1em; // instead of 0.2em

.dropdown-menu.dw-p-as-more
  background: white

.s_PT-5 .dw-depth-0.dw-t  // 5 = PageRole.EmbeddedComments
  float: none;

.s_PT-5 .dw-ar-t > .dw-p-as  // 5 = PageRole.EmbeddedComments
  & > .dw-a-reply
    top: 5px;
    padding: 8px 11px 8px 8px !important;


.dw-p-as
  // Prevent collapsed posts from appearing too close to any post just below,
  // by making the actions <div> at least this tall. (It's empty, currently
  // if the post is collapsed or deleted.)
  min-height: 17px


// Make the post actions 100% with, if page not approved, so the Approve and Reject
// buttons get left aligned.
.dw-ar-t.s_PndApr .dw-ar-p + .esPA
  width: 100%;
  // or:  float: none; — but then looks weird because: margin-bottom [MTBMGTP] oh well.

.s_PA_ModB
  margin: 10px;
  font-weight: bold;
  color: hsl(0, 0%, 15%);
  border: none;

// Align with orig post reply button.  [v_alg_op_btns]
.dw-ar-p + .esPA .s_PA_ModB
  position: relative;
  top: 1px;
  margin: 0 10px 0 0;

.s_PA_ModB-Apr
  background: hsl($acceptHue, 100%, 89%);
  margin-left: $avatarSpace;  // should skip on mobile?
  &:hover
    background: hsl($acceptHue, 100%, 80%);

.s_PA_ModB-Rej
  background: hsl($rejectHue, 100%, 91%);
  &:hover
    background: hsl($rejectHue, 100%, 82%);

.s_PA_ModB-Ban
  color: white;
  background: hsl($rejectHue, 100%, 34%);
  &:hover
    color: white;
    background: hsl($rejectHue, 100%, 21%);



// After-page-actions
//---------------------------

.s_APAs
  clearfix()
  margin: 5px 0 10px;
  padding-top: 16px;
  // A border between this button, and the reply above, hopefully stops people from
  // believing this button replies to that reply. (It instead adds a progress reply.)
  border-top: 1px solid hsl(0, 0%, 87%);

  a:first-child
    margin-left: 0;

.s_OpReB
  margin: 0;
  float: left
  &:hover
    // dupl code (6KF0WR4Z)
    color: hsl($uiHue, 100%, 25%);
    background: hsl($uiHue, 100%, 98%);
    outline: 1px solid hsl($uiHue, 100%, 92%);
    text-decoration: none;

// For now, hide "Append reply" and "Reply to orig post", on embedded comments pages.
// Those btns make things look too complicated.
.s_PT-5 .s_APAs
  display: none;

// These buttons makes no sense, for embedded discussions. [5UKWBP2]
html.s_InIframe .dw-ar-t > .dw-p-as
  .dw-a-edit,
  .dw-a-link,
  .dw-a-flag,
  .dw-a-change,
  .dw-a-more
    display: none;

// Inline action menu — currently not in use
//---------------------------
/*
.dw-pri.dw-pri .dw-as-inline // prio, so overrides :not(svg) [31Ik53]
  position: absolute
  z-index: 20

.dw-as-inline li
  margin: 0 // or margin from `dw-p-bd li' applied
  float: left
  list-style-type: none

.dw-as-inline .ui-button
  margin-right: 0 // or space between inline action menu buttons
*/


// vim: fdm=marker et ts=2 sw=2 tw=100 fo=tcqwn list
